<template>
  <div style="padding-top: 20px; padding-left: 30px;padding-right: 30px;background-color: #fff">
    <div>
      <el-form ref="justinTime" :inline="true" :model="justinTime" class="demo-form-inline" label-width="90px" size="small">
        <el-form-item label="仓库" >
          <el-select v-model="justinTime.depot" placeholder="仓库">
            <el-option label="一号仓库" value="1192535288131455001"></el-option>
            <el-option label="二号仓库" value="1192535288131455002"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料" >
          <el-autocomplete
            v-model="justinTime.commodity"
            :fetch-suggestions="querySearchAsync"
            placeholder="物料"
            size="small"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit(justinTime)">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- -->
    <div>
      <el-button type="text" icon="el-icon-plus" disabled style="margin-left: 20px">新增</el-button>
      <el-button type="text" icon="el-icon-upload" style="margin-left: 30px">导入</el-button>
      <el-button type="text" icon="el-icon-download" style="margin-left: 30px">导出</el-button>
      <el-button type="text" icon="el-icon-circle-close" style="margin-left: 30px" @click="toggleSelection()" >取消选择</el-button>
    </div>
    <!-- -->
    <div>
      <el-table
        v-loading="loading"
        ref="stock"
        :data="stock.slice((pagination.currentPage-1)*pagination.pageSize,pagination.currentPage*pagination.pageSize)"
        :default-sort = "{prop: 'date', order: 'descending'}"
        :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
        tooltip-effect="dark"
        border
        size="mini"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" fixed width="55" label="#"></el-table-column>
        <el-table-column label="商品编号" fixed width="160">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showDialog(scope.row)">{{ scope.row.commId }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="commodityBill.commName" align="center" label="商品名称" ></el-table-column>
        <el-table-column prop="depotBill.depotName" align="center" label="仓库" ></el-table-column>
        <el-table-column prop="amount" align="center" label="数量" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="money" align="center" label="成本(元）" show-overflow-tooltip width="130"></el-table-column>
        <el-table-column prop="commUnit" align="center" label="单位" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="gmtModified" align="center" sortable label="修改时间" show-overflow-tooltip ></el-table-column>
        <el-table-column prop="gmtCreate" align="center" label="创建时间" show-overflow-tooltip ></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" >编辑</el-button>
            <el-dropdown>
              <span style="cursor: pointer;color: #409EFF; font-size: 12px">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">关闭</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block" style="margin-top: 20px;">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-sizes="[5, 10]"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <el-dialog :visible.sync="dialogFormVisible" title="详情" width="55%">
        <dia-mod :form="diaModForm"></dia-mod>
      </el-dialog>
    </div>
    <div style="height: 10px"></div>
  </div>
</template>

<script>
import stock from '@/api/inv/stock'
import comm from '@/api/inv/comm'
import diaMod from './diaMod'
export default {
  name: 'justintime',
  components: {
    diaMod
  },
  data() {
    return {
      justinTime: {
        depot: '',
        commodity: ''
      },
      stock: [],
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 5
      },
      dialogFormVisible: false,
      diaModForm: {},
      loading: true
    }
  },
  created() {
    this.loadStockList()
  },
  methods: {
    loadStockList() {
      this.loading = true
      stock.stockList(this.justinTime.depot, this.justinTime.commodity).then(
        result => {
          this.stock = result.data.stockList
          this.pagination.total = result.data.count
          this.loading = false
        }
      )
    },
    onSubmit(data) {
      stock.stockListByDepotAndComm(data.depot, data.commodity).then(
        result => {
          this.stock = result.data.stockList
          this.pagination.total = result.data.count
        }
      )
    },
    querySearchAsync(queryString, cb) {
      if (queryString != null && queryString.length > 0) {
        comm.listCommName(queryString).then(
          result => {
            const list = []
            // 封装要显示的数据
            for (let v of result.data.commNameList) {
              list.push({ value: v.commName })
            }
            // 调用cb返回建议列表的数据
            cb(list)
          }, error => {
            console.log(error)
          })
      }
    },
    showDialog(data) {
      this.dialogFormVisible = true
      this.diaModForm = data
    },
    resetForm() {
      this.justinTime = {}
    },
    handleSelectionChange(val) {
      console.log(val.length)
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
    },
    toggleSelection() {
      this.$refs.stock.clearSelection()
    }
  }
}
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
